<template>
  <van-nav-bar title="消费记录" left-arrow @click-left="onBack" />

  <div class="clear"></div>
  <div class="clear"></div>
  <div class="user">
    <div class="user-image">
      <img :src="LoginAuth.avatar_cdn" alt="" />
    </div>
  </div>
  <div class="xiaofei">消费记录</div>

  <div class="list-box" v-if="OrderList.length > 0">
    <div class="list">
      <!-- 一个item代表一个订单 -->
      <div class="item" v-for="item in OrderList" :key="item.id">
        <div class="header">
          <div class="left">
            订单号：<span>{{ item.code }}</span>
          </div>
        </div>
        <div class="content">
          <van-card v-for="son in item.OrderProduct" :key="son.id" :price="son.total" :title="son.products.name" :thumb="son.products.cover_cdn">
          </van-card>
        </div>
        <div class="footer">
          <div class="date">交易时间：{{ item.createtime_text }}</div>
          <div style="color: red; font-size: 15px; font-weight: bold">消费了￥{{ item.amount }}</div>
        </div>
        <div class="btn">
          <van-button type="primary" size="mini" color="#7232dd" :to="{ path: '/order/order/info', query: { orderid: item.id } }"
            >订单详情</van-button
          >
          <van-button type="primary" size="mini" @click="toRate(item.id)">立即评价</van-button>
        </div>
      </div>
    </div>
  </div>

  <van-empty description="暂无订单" v-else />
</template>
<script>
  export default {
    data() {
      return {
        LoginAuth: {},
        avatar: [],
        OrderList: [],
      }
    },
    created() {
      this.LoginAuth = this.$cookies.get('LoginAuth') ? this.$cookies.get('LoginAuth') : {}

      if (this.LoginAuth.avatar) {
        this.avatar = [
          {
            url: this.LoginAuth.avatar_cdn,
          },
        ]
      }
      this.getOrderData()
    },
    methods: {
      onBack() {
        this.$router.push('/business/base/index')
      },
      async getOrderData() {
        let data = {
          busid: this.LoginAuth.id,
        }

        if (this.active !== '') {
          data.status = this.active
        }

        let result = await this.$api.OrderIndex(data)

        if (result.code === 1) {
          this.OrderList = result.data
        }
      },
      toRate(orderid) {
        this.$router.push({ path: '/order/order/rate', query: { orderid } })
      },
    },
  }
</script>
<style>
  @import url('/assets/css/profile.css');
  .xiaofei {
    color: #fff;
    font-size: 15px;
    text-align: center;
    height: 23px;
    background-color: rgb(223, 39, 39);
  }
  .list-box {
    background: #ccc;
  }

  .list-box .header {
    display: flex;
    justify-content: space-between;
    /* padding: 0 10px; */
  }

  .list .item .left {
    font-size: 18px;
    font-weight: bold;
  }
  .list .item .left span {
    font-size: 16px;
    font-weight: bold;
  }

  .item {
    padding: 5px 5px 3px;
    background: #fff;
    margin-bottom: 5px;
  }

  .item .header .left {
    font-size: 13px;
  }

  .item .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .item .footer .date {
    font-size: 12px;
    font-weight: bold;
    color: #000;
  }
  .btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
</style>
